<template>
  <div class="header">
    <el-row :gutter="10" class="headRow" :class="isDrawer ? 'onHeadRow' : ''">
      <div class="headBox">
        <div style="width: 10%">
          <div class="logo">
            <el-image
              @click="goHome"
              class="goHome"
              :src="
                userInfo
                  ? userInfo.orgInfo.imgUrl
                  : require('assets/images/logo.png')
              "
              fit="fill"
            >
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </div>
        </div>
        <div style="width: 10%">
          <div class="logo old-station">
            <el-image
              @click="oldStation"
              class="goHome old-station-img"
              :src="require('assets/images/bTurn.png')"
              fit="fill"
            >
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </div>
        </div>
        <el-col :span="14">
          <el-menu
            :default-active="onRoutes"
            :class="$i18n.locale === 'zh' ? 'el-menu-demo' : 'el-menu-demo-en'"
            mode="horizontal"
            text-color="#000"
            active-text-color="#FFF"
            router
          >
            <template>
              <!-- :route="item.url" -->
              <el-menu-item
                v-for="item in handList"
                :key="item.menuId"
                :index="item.url"
                @click="getTree(item.children, item.module_id)"
              >
                <span
                  v-text="
                    $i18n.locale === 'zh' ? item.menuCname : item.menuName
                  "
                >
                </span>
              </el-menu-item>
            </template>
          </el-menu>
        </el-col>
        <el-col :span="3" class="userbox">
          <div class="is-login flex-row" v-if="loginStatu && userInfo">
            <!-- https://gw.alipayobjects.com/zos/rmsportal/jZUIxmJycoymBprLOUbT.png -->
            <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link">
                <el-avatar
                  class="avatar"
                  :src="
                    userInfo.hasOwnProperty('avatarUrl')
                      ? userInfo.avatarUrl
                      : ''
                  "
                  icon="el-icon-user-solid"
                ></el-avatar>
                <!-- <i class="el-icon-arrow-down el-icon--right"></i> -->
              </span>
              <el-dropdown-menu slot="dropdown">
                <p style="text-align: center">
                  {{ userInfo.name ? userInfo.name : userInfo.user_account }}
                </p>
                <!-- icon="el-icon-setting" -->
                <el-dropdown-item divided command="setName">{{
                  $t("public.personalSettings")
                }}</el-dropdown-item>
                <!-- icon="el-icon-service" -->
                <el-dropdown-item command="myMusic">{{
                  $t("public.myMusic")
                }}</el-dropdown-item>
                <!-- icon="el-icon-switch-button" -->
                <el-dropdown-item command="logout">{{
                  $t("public.exitAccount")
                }}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <el-button class="no-login flex-row" @click="handleLogin" v-else>{{
            $t("login.loginBtn")
          }}</el-button>
        </el-col>
        <el-col :span="2" class="lang">
          <svg-icon name="language" class="icon icon-language" />
          <p v-if="$i18n.locale === 'zh'" @click="toggleLang('zh')">
            <span>中文</span><span>/EN</span>
          </p>
          <p v-else @click="toggleLang('en')">
            <span>EN</span><span>/中文</span>
          </p>
        </el-col>
      </div>
    </el-row>
    <!-- <el-row :gutter="20" class="navRow" v-if="navData !== []">
      <div class="navBox">
        <v-nav></v-nav>
      </div>
    </el-row> -->

    <!-- 登录弹窗 -->
    <el-dialog
      width="20%"
      :visible.sync="dialogLogin"
      :close-on-click-modal="false"
      append-to-body
      :show-close="false"
    >
      <template slot="title">
        <i class="el-icon-close" @click="closeDialog"></i>
      </template>
      <el-tabs v-model="activeLogin" stretch @tab-click="handleClick">
        <el-tab-pane :label="$t('public.SMSLogin')" name="phoneForm">
          <el-form :model="phoneForm" :rules="rules" ref="phoneForm">
            <el-form-item prop="phone">
              <el-input
                v-model="phoneForm.phone"
                :placeholder="$t('public.enterPhoneNumber')"
              ></el-input>
            </el-form-item>
            <el-form-item prop="testCode">
              <el-input
                v-model.number="phoneForm.testCode"
                class="testCode"
                maxlength="6"
                :placeholder="$t('public.enterVerificationCode')"
                @keyup.enter.native="Login(activeLogin)"
              >
                <el-button
                  slot="append"
                  @click="getCode"
                  :class="{ disabledSendCode: isOvertime ? true : false }"
                  :disabled="isOvertime"
                  v-text="$t(codeText) + this.timeText"
                ></el-button>
              </el-input>
            </el-form-item>
            <el-form-item prop="imgCode" class="ImgCode" v-if="codeCount >= 3">
              <el-input
                v-model="phoneForm.imgCode"
                maxlength="6"
                :placeholder="$t('public.enterGraphicVerificationCode')"
              >
              </el-input>
              <VerificationCode
                :changeCode.sync="identifyCode"
                :contentHeight="41 * scalseNum"
                :contentWidth="135 * scalseNum"
                class="verificationCode"
              ></VerificationCode>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane :label="$t('public.passwordLogin')" name="vipForm">
          <el-form :model="vipForm" :rules="rules" ref="vipForm">
            <el-form-item prop="account">
              <el-input
                v-model="vipForm.account"
                :placeholder="$t('public.enterUserName')"
              ></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                v-model="vipForm.password"
                show-password
                :placeholder="$t('public.enterPassword')"
                @keyup.enter.native="Login(activeLogin)"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <p class="loginAgreement">
          <el-checkbox v-model="loginAgreement"></el-checkbox>
          {{ $t("public.iHaveReadAndAccepted")
          }}<a
            :href="
              $i18n.locale === 'zh'
                ? 'https://hoss.kuke.com/111.html'
                : 'https://hoss.kuke.com/222.html'
            "
            target="_blank"
            >{{ $t("public.userServiceAgreement") }}</a
          >{{ $t("public.and")
          }}<a
            :href="
              $i18n.locale === 'zh'
                ? 'https://hoss.kuke.com/1.html'
                : 'https://hoss.kuke.com/4.html'
            "
            target="_blank"
            >{{ $t("public.privacyAgreement") }}</a
          >
        </p>
      </el-tabs>
      <!-- 底部按钮 -->
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          class="dialog-loginBtn"
          @click="Login(activeLogin)"
          :loading="loginLoading"
          >{{ $t("public.login") }}</el-button
        >
      </div>
    </el-dialog>
    <!--个人设置弹窗-->
    <el-dialog
      width="20%"
      :title="$t('public.personalSettings')"
      :visible.sync="dialogSet"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <!-- 个人设置 -->
      <el-form :model="setName" class="setName" :rules="rules" ref="setName">
        <el-form-item prop="name">
          <el-input
            class="input-new-tag"
            v-model="setName.name"
            :placeholder="$t('search.EnterName')"
            maxlength="15"
            :disabled="isSetName"
            show-word-limit
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button class="clearBtn" @click.native="dialogSet = false">{{
          $t("public.cancel")
        }}</el-button>
        <el-button type="primary" :disabled="isSetName" @click="createData">{{
          $t("public.save")
        }}</el-button>
        <!-- <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button> -->
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapMutations, mapGetters, mapActions } from "vuex"
import {
  isPhone,
  isBlank,
  isPassword,
  isTestCode,
  isCaptcha,
  isName,
} from "@/utils/validate"
import VerificationCode from "@/components/common/VerificationCode/Index"
export default {
  inject: ["reload"],
  components: {
    VerificationCode,
  },
  data() {
    const validatePhone = (rule, value, callback) => {
      if (isPhone(value)) {
        callback()
      } else {
        callback(new Error(this.$t("public.enterCorrectMobilePhoneNumber")))
      }
    }
    const validateTestCode = (rule, value, callback) => {
      if (isTestCode(value)) {
        callback()
      } else {
        callback(new Error(this.$t("public.enterValidVerificationCode")))
      }
    }
    const validateimgCode = (rule, value, callback) => {
      if (isCaptcha(value)) {
        if (value.toLowerCase() === this.identifyCode.toLowerCase()) {
          callback()
        } else {
          callback(new Error(this.$t("public.verificationCodeError")))
        }
      } else {
        callback(new Error(this.$t("public.enterValidVerificationCode")))
      }
    }
    const validateUserName = (rule, value, callback) => {
      if (isBlank(value)) {
        callback(new Error(this.$t("public.userNameCannotEmpty")))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (isPassword(value)) {
        callback()
      } else {
        callback(new Error(this.$t("public.passwordCannotLess")))
      }
    }
    const validateNickname = (rule, value, callback) => {
      if (isName(value)) {
        callback()
      } else {
        callback(new Error(this.$t("public.incorrectNicknameFormat")))
      }
    }
    return {
      loginLoading: false,
      activeLogin: "phoneForm",
      loginAgreement: false,
      //手机号登录
      phoneForm: {
        phone: "",
        testCode: "",
        imgCode: "",
      },
      codeText: "public.getVerificationCode",
      timeText: "",
      identifyCode: "", //当前生成的验证码
      isOvertime: false,
      vipForm: {
        account: "",
        password: "",
      },
      dialogSet: false, //个人设置弹窗
      setName: {
        name: "",
      },
      isSetName: true, //是否可以修改个人设置
      scalseNum: 1, //视图比例
      // 当前访问的频道ID
      currentModule: null,
      // 头部导航栏数据
      handList: [
        {
          menuId: "1",

          url: "/home",
          menuCname: "首页",
          menuName: "Home",
          children: [],
        },
        {
          menuId: "2",
          module_id: 516,
          url: "/classical",
          menuCname: "古典音乐",
          menuName: "Classical",
          children: [
            {
              menuId: "2-1",
              menuCname: "精品专辑",
              menuName: "Boutique Album",
              url: "/classical/album",
            },
            {
              menuId: "2-2",
              menuCname: "歌单",
              menuName: "Song list",
              url: "/classical/song-list",
            },
            {
              menuId: "2-3",
              menuCname: "艺术家",
              menuName: "Artist",
              url: "/classical/artist",
            },
            {
              menuId: "2-4",
              menuCname: "分类",
              menuName: "Classify",
              url: "/classical/sort",
            },
            {
              menuId: "2-5",
              menuCname: "厂牌",
              menuName: "brand",
              url: "/classical/brand",
            },
            {
              menuId: "2-6",
              menuCname: "资源",
              menuName: "Resource",
              url: "/classical/resource",
            },
            {
              menuId: "2-7",
              menuCname: "检索",
              menuName: "search",
              url: "/classical/search",
            },
          ],
        },
        {
          menuId: "3",
          module_id: 518,
          url: "/national",
          menuCname: "世界民族",
          menuName: "Ethnic",
          children: [
            {
              menuId: "3-1",
              menuCname: "精品专辑",
              menuName: "Album",
              url: "/national/album",
            },
            {
              menuId: "3-2",
              menuCname: "歌单",
              menuName: "Song list",
              url: "/national/song-list",
            },
            {
              menuId: "3-3",
              menuCname: "艺术家",
              menuName: "Artist",
              url: "/national/artist",
            },
            {
              menuId: "3-4",
              menuCname: "文化",
              menuName: "Culture",
              url: "/national/culture",
            },
            {
              menuId: "3-5",
              menuCname: "地区",
              menuName: "Area",
              url: "/national/area",
            },
            {
              menuId: "3-6",
              menuCname: "厂牌",
              menuName: "Brand",
              url: "/national/brand",
            },
            {
              menuId: "3-7",
              menuCname: "检索",
              menuName: "search",
              url: "/national/search",
            },
          ],
        },
        {
          menuId: "4",
          module_id: 580,
          url: "/jazz",
          menuCname: "爵士",
          menuName: "Jazz",
          children: [
            {
              menuId: "4-1",
              menuCname: "精品专辑",
              menuName: "Album",
              url: "/jazz/album",
            },
            {
              menuId: "4-2",
              menuCname: "歌单",
              menuName: "Song list",
              url: "/jazz/song-list",
            },
            {
              menuId: "4-3",
              menuCname: "艺术家",
              menuName: "Artist",
              url: "/jazz/artist",
            },
            {
              menuId: "4-4",
              menuCname: "分类",
              menuName: "Sort",
              url: "/jazz/sort",
            },
            {
              menuId: "4-5",
              menuCname: "厂牌",
              menuName: "brand",
              url: "/jazz/brand",
            },
            {
              menuId: "4-7",
              menuCname: "检索",
              menuName: "search",
              url: "/jazz/search",
            },
          ],
        },
        {
          menuId: "5",
          module_id: 557,
          url: "/video",
          menuCname: "视频",
          menuName: "Videos",
          children: [],
        },
        {
          menuId: "6",
          module_id: 517,
          url: "/audio-book",
          menuCname: "有声读物",
          menuName: "Audiobooks",
          children: [],
        },
        {
          menuId: "7",
          module_id: 590,
          url: "/music-score",
          menuCname: "乐谱",
          menuName: "Music",
          children: [],
        },
        {
          menuId: "8",
          module_id: 591,
          url: "/theater",
          menuCname: "剧院",
          menuName: "Theater",
          children: [],
        },
        {
          menuId: "9",
          url: "/K+Live",
          menuCname: "K+现场",
          menuName: "K+Live",
          children: [],
        },
        {
          menuId: "10",
          url: "/connoisseur",
          menuCname: "艺术鉴赏",
          menuName: "Connoisseur",
          // children: [],
        },
      ],
      //登录规则
      rules: {
        phone: [
          // {
          //   required: true,
          //   message: this.$t("public.enterPhoneNumber"),
          //   trigger: "blur",
          // },
          { validator: validatePhone, trigger: "blur" },
        ],
        testCode: [
          // {
          //   required: true,
          //   message: this.$t("public.enterVerificationCode"),
          //   trigger: "blur",
          // },
          { validator: validateTestCode, trigger: "blur" },
        ],
        imgCode: [
          // {
          //   required: true,
          //   message: this.$t("public.enterGraphicVerificationCode"),
          //   trigger: "blur",
          // },
          { validator: validateimgCode, trigger: "blur" },
        ],
        account: [
          // {
          //   required: true,
          //   message: this.$t("public.enterUserName"),
          //   trigger: "blur",
          // },
          { validator: validateUserName, trigger: "blur" },
        ],
        password: [
          // {
          //   required: true,
          //   message: this.$t("public.enterPassword"),
          //   trigger: "blur",
          // },
          { validator: validatePassword, trigger: "blur" },
        ],
        name: [
          // {
          //   required: true,
          //   message: this.$t("search.EnterName"),
          //   trigger: "blur",
          // },
          { validator: validateNickname, trigger: "blur" },
        ],
      },
    }
  },
  computed: {
    ...mapGetters([
      "userInfo",
      "loginStatu",
      "codeCount",
      "dialogLogin",
      "isDrawer",
    ]),
    onRoutes() {
      // return "/" + window.location.href.split('/').reverse()[0];
      // return "/" + this.$route.path.split("/")[0];
      if (this.$route.meta.title === "router.albumDetails") {
        return "/" + this.$route.params.sort
      } else {
        return "/" + this.$route.path.split("/")[1]
      }
    },
  },
  created() {
    let currentUrl = this.handList.find((item) => {
      return window.location.hash.indexOf(item.url) > -1
    })
    if (currentUrl) {
      this.currentModule = currentUrl.module_id
    } else {
      this.currentModule = null
    }
  },
  mounted() {
    this.sendLog(true)
    // 关闭浏览器窗口的时候停止发送log
    window.onbeforeunload = function () {
      this.sendLog(false)
    }
    this.scalseNum = document.documentElement.clientWidth / 1920
  },
  methods: {
    sendLog(flag) {
      let sendTimer
      if (flag) {
        sendTimer = setInterval(async () => {
          if (this.loginStatu) {
            let params = {
              login_type: this.userInfo.login_type, //登录方式：1.手机号,2账密
              user_source: 3, //用户来源：1.android; 2.ios; 3.web; 4.WAP; 5.未知
              user_id: this.userInfo.userId, //用户id
              user_account: this.userInfo.user_account, //用户登录账号
              org_id: this.userInfo.orgInfo.orgId, //机构id
              org_name: this.userInfo.orgInfo.name, //机构名称
              create_time: +new Date(), //时间（时间戳）
              data_type: 2, //数据类型：1.登录次数，2.在线时长
              APIVersion: "0.6.0",
            }
            this.currentModule && (params.module_id = this.currentModule)
            await this.$api.user.sendLog(params)
            this.currentModule = null
          } else {
            clearInterval(sendTimer)
          }
        }, 2 * 60 * 1000)
      } else {
        clearInterval(sendTimer)
      }
      this.$once("hook:beforeDestroy", () => {
        clearInterval(sendTimer)
      })
    },
    //点击导航栏事件
    getTree(data, module_id) {
      module_id && (this.currentModule = module_id)
      if (data) {
        // if (sessionStorage.getItem("navData") !== JSON.stringify(data)) {
        sessionStorage.setItem("navData", JSON.stringify(data))
        this.setNavData(data)
      }
      // 关闭侧边栏
      if (this.isDrawer) {
        this.setDrawer(false)
      }
    },
    // 登录
    handleLogin() {
      this.setDialogLogin(true)
      this.$nextTick(() => {
        this.$refs["phoneForm"].resetFields()
        this.$refs["vipForm"].resetFields()
      })
    },
    closeDialog() {
      this.setDialogLogin(false)
      this.$nextTick(() => {
        this.$refs["phoneForm"].resetFields()
        this.$refs["vipForm"].resetFields()
      })
    },
    // 点击打开登录弹窗
    Login(type) {
      this.loginLoading = false
      this.$refs[type].validate((valid) => {
        if (valid && this.loginAgreement) {
          this.loginLoading = true
          let params
          if (type == "phoneForm") {
            params = {
              phone: this.phoneForm.phone,
              code: this.phoneForm.testCode,
              type: "1",
            }
          } else if (type == "vipForm") {
            params = {
              account: this.vipForm.account,
              password: this.vipForm.password,
              type: "2",
            }
          }
          // let { phone, testCode } = this.phoneForm;
          this.loginAsync(params)
        } else if (this.loginAgreement == false) {
          this.$message({
            message: this.$t("public.readUserAgreementFirst"),
            offset: 46,
            showClose: true,
          })
        } else {
          this.loading = false
        }
      })
    },
    // 个人设置界面提交按钮
    createData() {
      this.$refs.setName.validate(async (valid) => {
        if (valid) {
          let params = {
            name: this.setName.name,
            token: this.userInfo.token,
          }
          let res = await this.$api.user.updateUsername(params)
          if (res.code === 1000000) {
            let userInfo = this.userInfo
            userInfo.name = this.setName.name
            window.localStorage.setItem("userInfo", JSON.stringify(userInfo))
            this.setUserInfo(userInfo)
            this.dialogSet = false //关闭弹窗
            this.$message({
              message: this.$t("public.addSuccess"),
              offset: 46,
              type: "success",
              showClose: true,
            })
          } else if (res.code === 1000003) {
            this.$message({
              showClose: true,
              offset: 46,
              message: this.$t("public.serverError"),
              type: "error",
            })
          } else {
            this.$message({
              showClose: true,
              offset: 46,
              message: res.message,
              type: "error",
            })
          }
        }
      })
    },
    //点击获取验证码
    getCode() {
      if (this.isOvertime) {
        return false
      }
      this.$refs["phoneForm"].validateField("phone", async (phoneError) => {
        if (!phoneError) {
          try {
            let res = await this.$api.user.sendPhoneCode({
              phone: this.phoneForm.phone,
            })
            if (res.code == 1000000) {
              let time = 60
              this.codeText = "public.resend"
              this.timeText = time + "S"
              this.isOvertime = true
              let sendTimer = setInterval(() => {
                time--
                this.timeText = time + "S"
                if (
                  time < 0 ||
                  this.dialogLogin == false ||
                  this.isOvertime == false
                ) {
                  this.isOvertime = false
                  clearInterval(sendTimer)
                  this.codeText = "public.getVerificationCode"
                  this.timeText = ""
                }
              }, 1000)
            } else if (res.code == 1700703) {
              this.$message({
                message: this.$t("public.failedSendVerificationCode"),
                offset: 46,
                type: "error",
                showClose: true,
              })
            } else {
              this.$message({
                message: this.$t("public.unknownError"),
                offset: 46,
                type: "error",
                showClose: true,
              })
            }
          } catch (e) {
            this.$message({
              message: this.$t("public.networkException"),
              offset: 46,
              type: "error",
              showClose: true,
            })
          }
        }
      })
    },
    async loginAsync(params) {
      try {
        let res = await this.$api.user.login(params)
        setTimeout(() => {
          this.loginLoading = false
        }, 520)
        if (res.code == 1000000) {
          if (params.type == "1") {
            // 手机号登录
            res.source.user_account = params.phone
          } else if (params.type == "2") {
            // 账密登录
            res.source.user_account = params.account
          }
          res.source.login_type = params.type
          // res.source.name
          // 1到期 0未到期 2后台添加
          // if (res.source.state === 1) {
          //   this.$notify({
          //     title: this.$t("public.warning"),
          //     message: "当前机构已过期，请联系您们管理员",
          //     type: "warning",
          //     offset: 100,
          //   });
          //   return;
          // }
          // 是否用户所属机构
          if (res.source.isUserOrg === 0) {
            this.$confirm(
              this.$t("public.IPAddressCurrentOrganization"),
              this.$t("public.tips"),
              {
                confirmButtonText: this.$t("public.confirm"),
                cancelButtonText: this.$t("public.cancel"),
                type: "warning",
              }
            )
              .then(() => {
                this.$notify({
                  title: this.$t("public.success"),
                  message: this.$t("public.jumpBackBoundMechanism"),
                  type: "success",
                  offset: 40,
                })
                this.setLoginStatu(true)
                this.setUserInfo(res.source)
                this.setDialogLogin(false)
                this.sendLog(true)
                window.localStorage.setItem("token", res.source.token)
                window.localStorage.setItem(
                  "userInfo",
                  JSON.stringify(res.source)
                )
                // window.localStorage.setItem("lang", res.lang);

                window.localStorage.setItem("loginStatu", true)
                this.reload()
                this.$message({
                  message: this.$t("public.loginSucceeded"),
                  offset: 46,
                  type: "success",
                  showClose: true,
                })
              })
              .catch(() => {
                return
              })
          } else {
            this.setLoginStatu(true)
            this.setUserInfo(res.source)
            this.setDialogLogin(false)
            this.sendLog(true)
            window.localStorage.setItem("token", res.source.token)
            window.localStorage.setItem("userInfo", JSON.stringify(res.source))
            // window.localStorage.setItem("lang", res.lang);

            window.localStorage.setItem("loginStatu", true)
            this.reload()
            this.$message({
              message: this.$t("public.loginSucceeded"),
              offset: 46,
              type: "success",
              showClose: true,
            })
          }
        } else if (res.code == 1700704) {
          this.$message({
            message: this.$t("public.verificationCodeError"),
            offset: 46,
            type: "error",
            showClose: true,
          })
          if (sessionStorage.getItem("codeCount") != null) {
            let num = sessionStorage.getItem("codeCount")
            sessionStorage.setItem("codeCount", +num + 1)
            this.setCodeCount(+num + 1)
          } else {
            sessionStorage.setItem("codeCount", 1)
          }
        } else if (res.code == 1700701) {
          this.$message({
            message: this.$t("public.loginFailed"),
            offset: 46,
            type: "error",
            showClose: true,
          })
        } else if (res.code == 1700702) {
          this.$message({
            message: this.$t("public.accountPasswordIncorrect"),
            offset: 46,
            type: "error",
            showClose: true,
          })
        } else if (res.code == 1700705) {
          // 机构不存在
          this.$notify({
            title: this.$t("public.warning"),
            message: this.$t("public.organizationValidityExpires"),
            type: "warning",
            duration: 0, // 不关闭提示
            offset: 100,
          })
        } else if (res.code == 1700707) {
          // 当前ip不属于机构
          this.$notify({
            title: this.$t("public.warning"),
            message: this.$t("public.CurrentIPDoesNotBelongOrganization"),
            type: "warning",
            duration: 0, // 不关闭提示
            offset: 100,
          })
        } else if (res.code == 1700708) {
          // 登录-用户过期
          this.$notify({
            title: this.$t("public.warning"),
            message: this.$t("public.validityExpired"),
            type: "warning",
            duration: 0, // 不关闭提示
            offset: 100,
          })
        } else {
          this.$message({
            message: this.$t("public.unknownError"),
            offset: 46,
            type: "error",
            showClose: true,
          })
        }
      } catch (e) {
        this.$message({
          message: this.$t("public.networkException"),
          offset: 46,
          type: "error",
          showClose: true,
        })
      }
    },
    ...mapMutations({
      setUserInfo: "SET_USERINFO",
      setLoginStatu: "SET_LOGINSTATU",
      setNavData: "SET_NAVDATA",
      setCodeCount: "SET_CODECOUNT",
      setDrawer: "SET_DRAWER",
      setDialogLogin: "SET_DIALOGLOGIN",
    }),
    ...mapActions([
      // 播放视频移除播放
      "stopPlay",
    ]),
    handleCommand(command) {
      if (command == "myMusic") {
        this.$router.push({
          name: "myMusic",
        })
        if (this.isDrawer) {
          this.setDrawer(false)
        }
      } else if (command == "setName") {
        this.dialogSet = true
        this.$nextTick(() => {
          this.$refs["setName"].resetFields()
          this.setName.name = this.userInfo.name
            ? this.userInfo.name
            : this.userInfo.user_account
          this.isSetName = this.userInfo.login_type == 1 ? false : true
        })
      } else if (command == "logout") {
        this.$router.push({ name: "home" })
        this.setLoginStatu(false)
        this.stopPlay()
        window.localStorage.setItem("token", "")
        window.localStorage.setItem("loginStatu", false)
        window.localStorage.setItem("userInfo", "")
        this.sendLog(false)
        this.reload()
      }
    },
    //语言切换
    toggleLang(lang) {
      if (lang == "zh") {
        this.$i18n.locale = "en"
        localStorage.setItem("locale", "en")
        this.$message({
          message: "Switch to English!",
          offset: 46,
          type: "success",
          showClose: true,
        })
      } else if (lang == "en") {
        this.$i18n.locale = "zh"
        localStorage.setItem("locale", "zh")
        this.$message({
          message: "切换为中文！",
          offset: 46,
          type: "success",
          showClose: true,
        })
      }
      // 切换中英文重新排序(重新加载)
      if (this.$route.meta.sort) {
        this.reload()
      }
    },
    // tab切换登录方式
    handleClick(tab) {
      this.isOvertime = false
      this.$refs[tab.name].resetFields()
    },
    oldStation() {
      window.location.href = "https://www.kuke.com";
    },
    goHome() {
      if (this.isDrawer) {
        this.setDrawer(false)
      }
      if (this.$route.name !== "home") {
        this.$router.push({ name: "home" })
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.headRow {
  width: 100%;
  position: fixed;
  z-index: 999;
  background: #fff;
  box-shadow: 0 4px 4px 2px #f5f5f5;
  .goHome {
    width: 100%;
    cursor: pointer;
  }
  &.onHeadRow {
    z-index: 9998;
  }
  .headBox {
    width: 1300px;
    min-width: 850px; /*no*/
    height: 60px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    overflow: hidden;
    .logo {
      text-align: center;
    }
    .old-station {
      // margin-left: -8px;
      margin-right: 20px;
    }
    .old-station-img {
      max-width: 84px;
    }
    .el-menu {
      display: flex;
      font-weight: bold;
      .el-menu-item {
        font-size: 18px;
        &.is-active {
          background-color: #a1322c !important;
        }
      }
      &.el-menu-demo {
        .el-menu-item {
          padding: 0 16px;
        }
      }
      &.el-menu-demo-en {
        .el-menu-item {
          padding: 0 8px;
        }
      }
    }
    .userbox {
      display: flex;
      flex-direction: row-reverse;
      text-align: center;
      .is-login {
        cursor: pointer;
        .el-dropdown-link {
          display: flex;
          align-items: center;
          .avatar {
            margin-right: 15px;
            background-color: #c76762;
          }
        }
      }
      .no-login {
        background-color: #fff;
        color: #333333;
        border-width: 0;
        &:hover {
          color: #fa2800;
        }
      }
    }
    .lang {
      display: flex;
      align-items: center;
      cursor: pointer;
      .icon-language {
        margin-right: 4px;
      }
      p {
        width: 100%;
        white-space: nowrap;
        font-size: 16px;
        span {
          &:first-child {
            color: #a1322c;
          }
        }
      }
    }
  }
}
.el-dropdown-menu__item {
  font-size: 18px;
}
.el-dialog {
  .el-dialog__header {
    i {
      cursor: pointer;
      float: left;
      color: #9b9b9b;
    }
  }
  .el-tabs__content {
    #pane-phoneForm {
      .ImgCode {
        .verificationCode {
          height: 100%;
          overflow: hidden;
          position: absolute;
          top: 0;
          right: 0;
        }
      }
    }
    .el-form {
      .el-form-item {
        margin-top: 24px;
      }
    }
    .loginAgreement {
      a {
        color: #a1322c;
      }
      width: calc(100% / 0.8);
      // white-space: nowrap;
      // font-size: .12rem;
      font-size: 17px;
      -webkit-transform-origin-x: 0; //缩小后文字居左
      -webkit-transform: scale(0.8); //关键
      transform-origin-x: 0;
      transform: scale(0.8);
      -moz-transform-origin: 0 0;
    }
  }
  .dialog-footer {
    display: flex;
    justify-content: space-between;
    .dialog-loginBtn {
      width: 100%;
      height: 44px;
      margin-bottom: 44px;
      background: #a1322c;
      border-color: #a1322c;
    }
  }
}
</style>
<style lang="scss">
.testCode {
  > .el-input-group__append {
    color: #a1322c;
    .el-button--default {
      border: 1px solid #a1322c;
      background-color: #fff;
    }
    .is-disabled {
      &:hover {
        border: 1px solid #dbd8d8;
      }
    }
  }
}
.disabledSendCode {
  border: 1px solid #dbd8d8 !important;
  color: #c0c4cc !important;
}
</style>
